$(function(){
    $('#keyword').on('keyup',function (){
        const keyword = $(this).val();
        if(keyword!==null&&keyword!==''&&keyword.length!==0){
            $.ajax({
                type   :'GET',
                url    :'http://localhost:8088/UserSearchAjax?keyword='+keyword,
                success:function (list){
                    console.log(keyword);
                    let productListHTML = '';
                    for(let i=0; i<list.length; i++){
                        productListHTML+='<li class=\"productAutoItem\" data-userid="';
                        productListHTML+=list[i].userid;
                        productListHTML+='">';
                        productListHTML+=list[i].userid;
                        productListHTML+='</li>';
                    }
                    $('#productAutoList').html(productListHTML);
                    $('#productAutoComplete').show();
                },
                error  :function (errorMsg){
                    console.log(errorMsg);
                }
            });
        }else{
            $('#productAutoComplete').hide();
        }

    });

    $(document).on('click','.productAutoItem',function (){
        const itemId = $(this).data('userid');
        console.log(itemId);
        $('#productAutoComplete').hide();
        $('#keyword').val('');
        window.location.href='http://localhost:8088/searchUser?keyword='+itemId ;
    });


var orign = document.getElementById("orign");//这个是第一个界面
var obj = document.getElementById("userAdd");//这个是第二个界面
var objEdit = document.getElementById("userEdit");//这个是第三个界面
var confirmButton = document.getElementsByName("userNew");//这个是新增按钮
var EditButton = document.querySelectorAll('.userEditButton');//这个是编辑按钮的集合

obj.style.display="none";
objEdit.style.display="none";
var names='';
var values='';
console.log("hello");
$('#userNew').on('click',function(){
    console.log("he");
    orign.style.display="none";//隐藏
    obj.style.display="";//显示
});
EditButton.forEach(function(element){
    //将每一个Edit进行绑定
    element.onclick=function(){
        console.log("Edit successfully");
        orign.style.display="none";//隐藏
        objEdit.style.display="";//显示
        var name = this.getAttribute("name");
        var editusername = document.getElementsByName("editusername");
        if (editusername != null){
            console.log('取到');
            editusername.value="ni hao";
            editusername.value="hello";
        }else{
            console.log('未取到');
        }
        var editfirstName = document.getElementsByName("editfirstName");
        var editlastName = document.getElementsByName("editlastName");
        var editAddress1 = document.getElementsByName("editAddress1");
        var editAddress2 = document.getElementsByName("editAddress2");
        var editCountry=document.getElementsByName("editCountry");
        var editCity = document.getElementsByName("editCity");
        var editZip = document.getElementsByName("editZip");
        var editState = document.getElementsByName("editState");
        var editPhone = document.getElementsByName("editPhone");


        console.log(name);
        //接下来要写ajax了
        $.ajax({
            type     :'GET',
            url      :'http://localhost:8088/userEditAjax?userid='+name,
            success  :function (data){
                //取到键值对了
                console.log(data.userid);
                console.log(data.addr1);
                console.log(data.addr2);
                editusername[0].value = data.userid;
                editfirstName[0].value =data.firstname;
                editlastName[0].value =data.lastname;
                editAddress1[0].value = data.addr1;
                editAddress2[0].value = data.addr2;
                editCountry[0].value = data.country;
                editCity[0].value = data.city;
                editZip[0].value = data.zip;
                editState[0].value=data.state;
                editPhone[0].value = data.phone;

            },
            error    :function (errorMsg){
                console.log(errorMsg);
            }
        });
    }
});
});